<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <title>Hello, world!</title>
</head>
<body>


<div id="app">

    <table class="table">
        <thead>
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>借出用户</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in bookList" :key="item.b_id">
            <td>{{item.b_name}}</td>
            <td>{{item.author}}</td>
            <td>{{item.press}}</td>
            <td>{{item.lender}}</td>
            <td>
                <button type="button" class="btn btn-link"  @click="accept(item)" >接受</button>
                <button type="button" class="btn btn-link"  @click="decline(item)" >拒绝</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 新增窗口 -->
    <div id="add-win" style="display:none;padding:15px;">

        <form>
            <div class="form-group">
                <label>书名：</label>
                <input type="text" class="form-control" v-model="addData.b_name" >
            </div>
            <div class="form-group">
                <label>作者：</label>
                <input type="text" class="form-control" v-model="addData.author" >
            </div>
            <div class="form-group">
                <label>出版社：</label>
                <input type="text" class="form-control" v-model="addData.press" >
            </div>
            <div class="form-group">
                <label>借出用户ID：</label>
                <input type="text" class="form-control" v-model="addData.lender" >
            </div>
            <button type="button" class="btn btn-primary"  @click="add" >提交</button>
        </form>


    </div>



</div>


<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>

<script>

    //定义vue应用配置
    const app = {
        //data函数专门用来定义数据
        data() {
            return {
                bookList: [],//图书列表数据
                addData:{//新增数据
                    b_id:'',
                    b_name:'',
                    author:'',
                    press:'',
                    lender:'',
                    cover:'',
                    status:0
                },
                addIdx:null,//新增窗口标识
                updIdx:null,//修改窗口标识
                updData:{//修改数据
                    t_id:'',
                    t_name:'',
                    t_sex:'',
                    t_edu:'',
                    t_title:'',
                    t_birth:'',
                    t_remark:''
                },

            };
        },

        //定义方法
        methods: {

            //获取数据
            getbookList(){
                //向服务端接口http://localhost:8888/jd_demo_server_war_exploded/tea/teaList，发出get请求

                myAxios.get('/admin/acceptbook').then((response) => {

                    this.bookList = response.data.data;
                });
            },

            
            accept(item){

                myAxios.post('/admin/acceptbook',item).then(res=>{
                    layer.close(idx);
                    if(res.data.success){
                        this.getbookList();
                        layer.close(this.updIdx);
                        layer.msg('添加成功！',{icon:1});
                    }else{
                        layer.msg(res.data.message,{icon:2});
                    }
                }).catch(err=>{
                    layer.close(idx);
                    layer.msg('添加失败！',{icon:2});
                });
            },
            decline(item){

                myAxios.post('/admin/deletebook',item).then(res=>{
                    layer.close(idx);
                    if(res.data.success){
                        this.getbookList();
                        layer.close(this.updIdx);
                        layer.msg('已拒绝申请！',{icon:1});
                    }else{
                        layer.msg(res.data.message,{icon:2});
                    }
                }).catch(err=>{
                    layer.close(idx);
                    layer.msg('拒绝申请失败！',{icon:2});
                });
            }
        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
        mounted() {
            this.getbookList();
        }
    };

    Vue.createApp(app).mount('#app')

</script>


</body>
</html>